<template>
	<div>
		<h1>角色管理</h1>
		<div class="back">
			<el-button type="primary" @click="addThe = true">添加角色</el-button>
			<!-- 添加数据的弹出框 -->
			<el-dialog title="添加角色" :visible.sync="addThe">
				<!-- 内容 -->
				<el-form label-width="80px">
				  <el-form-item label="角色名称">
				    <el-input v-model="addRoleVo.roleName"></el-input>
				  </el-form-item>
				</el-form>
				<div slot="footer">
				   <el-button @click="addThe= false">取 消</el-button>
				   <el-button type="primary" @click="saveTheShow">提交</el-button>
				</div>
			</el-dialog>
			<el-input v-model="addRoleVo.keyWord" style="width: 250px;" clearable></el-input>
			<el-button type="primary" @click="search">搜索</el-button>
			<div class="">
				<template>
					<el-table :data="tableData" height="450" border style="width: 100%"
						@selection-change="handleSelectionChange" ref="multipleTable">
						<el-table-column type="selection" width="55"> </el-table-column>
						<el-table-column prop="userNickname" label="用户昵称" width="180"> </el-table-column>
						<el-table-column label="头像" width="180">
							<template slot-scope="scope">
								<el-avatar shape="square" :size="50" :fit="fit" :src="scope.row.userImage">
								</el-avatar>
							</template>
						</el-table-column>
						<el-table-column prop="userAccount" label="账号"></el-table-column>
						<el-table-column prop="userLastlogin" label="上次登陆时间"></el-table-column>
						<el-table-column prop="address" label="角色状态">
							<template slot-scope="scope">
							<span>启用</span>
							<el-switch
							  @change="statusOne(scope.row)"
							  v-model="scope.row.userStatus"
							  active-value=0
							  inactive-value=1
							  active-color="#ff4949"
							  inactive-color="#13ce66">
							</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="RoleMbOne = true">角色</el-button>
								<el-dialog
								  title="提示"
								  :visible.sync="RoleMbOne"
								  width="30%">
								  <span>角色</span>
								  <template>
								    <el-select v-model="valueRole" placeholder="请选择">
								      <el-option
								        v-for="item in options"
								        :key="item.value"
								        :label="item.label"
								        :value="item.value">
								      </el-option>
								    </el-select>
								  </template>
								  <span slot="footer" class="dialog-footer">
								    <el-button @click="RoleMbOne = false">取 消</el-button>
								    <el-button type="primary" @click="RoleMbOne = false">确 定</el-button>
								  </span>
								</el-dialog>
								<el-button type="text" @click="RoleAuOne = true">角色权限</el-button>
								<el-dialog
								  title="提示"
								  :visible.sync="RoleAuOne"
								  width="30%">
								  <span>角色权限</span>
								  <span slot="footer" class="dialog-footer">
								    <el-button @click="RoleAuOne = false">取 消</el-button>
								    <el-button type="primary" @click="RoleAuOne = false">确 定</el-button>
								  </span>
								</el-dialog>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 20px">
						<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
						<el-button @click="toggleSelection()">取消选择</el-button>
					</div>
				</template>
			</div>
		</div>
		<div class="">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addRoleVo:{
					roleName:null,
					keyWord:null
				},
				addThe:false,
				RoleMbOne:false,
				RoleAuOne:false,
				tableData:[],
				options: [{
				          value: '选项1',
				          label: '黄金糕'
				        }, {
				          value: '选项2',
				          label: '双皮奶'
				        }, {
				          value: '选项3',
				          label: '蚵仔煎'
				        }, {
				          value: '选项4',
				          label: '龙须面'
				        }, {
				          value: '选项5',
				          label: '北京烤鸭'
				        }],
				valueRole:null
			}
		},
		methods: {
			// 搜索
			search(){
				this.$http.post("/user/findAllUsersOne",this.addRoleVo).then(resp=>{
					if(resp.data.code == 2000) {
						this.$message.success(resp.data.message);
						this.tableData = resp.data.data;
					} else {
						this.$message.error(resp.data.message);
					}
				})
			},
			// 新增角色
			saveTheShow(){
				this.$http.post("/role/save",this.addRoleVo).then(resp=>{
					if(resp.data.code == 2000) {
						this.$message.success(resp.data.message);
						this.addThe=false;
						this.addRoleVo.roleName=null;
					} else {
						this.$message.error(resp.data.message);
						this.addThe=false;
					}
				})
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			loadUsers(){
				this.$http.post("/user/findAllUsers").then(resp=>{
					console.log(resp);
					this.tableData=resp.data.data;
				})
			},
			statusOne(a){
				this.$http.get("/user/updateUserStatus/"+a.userId).then(resp=>{
					if(resp.data.code == 20000) {
						this.$message({
						  message: '成功',
						  type: 'success'
						});
					} else {
						 this.$message.error('失败');
					}
				})
			},
			loadRoleOne(){
				this.$http.post("/role/findAll",null).then(resp=>{
					if(resp.data.code == 2000) {
						this.$message.success(resp.data.message);
						this.options = resp.data.data;
					} else {
						this.$message.error(resp.data.message);
					}
				})
			}
	},
	created() {
		this.loadUsers();
		// this.loadRoleOne();
	}
	}
</script>

<style>
	.back {
		width: 100%;
		height: 100%;
		background-image: url(../img/repair-bg.png)
	}
</style>
